<template>
	<el-row class="login-container">
		<el-col :md="12" :lg="16" class="left">
			<div>
				<div>欢迎光临</div>
				<div>后台管理系统</div>
			</div>
		</el-col>
		<el-col :md="12" :lg="8" class="right">
			<h2 class="title">账号密码登录</h2>
			<div>
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
					<el-form-item label="用户名" prop="username">
						<el-input v-model="ruleForm.username"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input type="password" v-model="ruleForm.password" show-password></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import {
		Message
	} from 'element-ui';
	import {
		login
	} from '../api';
	import {
		set
	} from 'core-js/core/dict';
	export default {
		data() {
			return {
				ruleForm: {
					password: '',
					username: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],

				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let data = {
							username: this.ruleForm.username,
							password: this.ruleForm.password
						}
						login(data).then(res => {
							// console.log(res);
							//登录成功
							if (res.data.code === 0) {
								let userInfo = {
									userId: res.data.data.userId,
									username: res.data.data.username,
									accessToken: res.data.data.token
								}
								//存储返回数据
								this.$store.commit('updateUserInfo', userInfo);
								//生成菜单
								let menuList = res.data.data.menuList;
								this.generaMenu(menuList);
								//localStore存储用户信息
								this.setStore("userId", res.data.data.userId);
								//localStore存储token
								this.setStore("accessToken", res.data.data.token);
								//登录成功跳转到主页面
								if (this.$route.path !== '/home') {
									this.$router.push('/home');
								}
							} else {
								Message.error("登录失败，请核实用户名和密码！");
							}
						})
					} else {
						Message.error("校验失败，请核实输入的用户名和密码！");
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			generaMenu(menuList) {
				let routers = [];
				let routerList = this.generateRouter(menuList,routers);
				let homeRoute = this.$router.options.routes.find(route => route.name === 'home');
				if (routerList != [] || routerList.length > 0) {
					//遍历菜单列表,将需要跳转的菜单放到children中
					routerList.forEach(item => {
						if(item.children != null && item.children != [] && item.children.length > 0){
							item.children.forEach(sub => {
								homeRoute.children.push(sub);
							})
						}
					})
				}
				//添加路由
				this.$router.addRoute(homeRoute);
				//vuex存储菜单数据
				this.$store.commit('updateMenuList', routerList);
				//localStore存储菜单数据
				this.setStore("menuList",routerList);
			},
			generateRouter(menuList, routerList) {
				menuList.forEach(item => {
					if (item.children != null && item.children != [] && item.children.length > 0) {
						let childRoutes = [];
						childRoutes = this.generateRouter(item.children, childRoutes);
						let router = {
							name: item.linkUrl != '' || item.linkUrl != null ? item.linkUrl.replace('/','') : '',
							path: item.linkUrl,
							meta: {
								title: item.permissionName,
								icon: item.icon,
								id: item.id
							},
							component: this.loadView(item.path),
							children: childRoutes
						}
						routerList.push(router);
					} else {
						let router = {
							name: item.linkUrl != '' || item.linkUrl != null ? item.linkUrl.replace('/','') : '',
							path: item.linkUrl,
							meta: {
								title: item.permissionName,
								icon: item.icon,
								id: item.id
							},
							component: this.loadView(item.path),
							children: []
						}
						routerList.push(router);
					}
				})
				return routerList;
			},
			loadView(view) {
				return () => import(`@/${view}.vue`)
			}
		}
	}
</script>

<style>
	.login-container {
		height: 100vh;
	}

	.left {
		background-color: aqua;
		font-size: 32px;
	}

	.right {
		background-color: aquamarine;
	}

	.left,
	.right {
		/* border: 1px solid red; */
		margin-top: 10%;
		height: 50%;
		align-content: center;
	}

	.right {
		padding-right: 6%;
	}
</style>